.preloader-wrap {
    position: fixed;
    z-index: 99999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.25rem;
    height: 3.75rem;
    margin-top: -1.875rem;
    margin-left: -.9375rem;
    &:after,
    &:before {
        content: '';
        width: 20px;
        height: 20px;
        border-radius: 20px
    }
    &:before {
        position: absolute;
        animation: preloader_before 1.5s infinite ease-in-out;
        background: #ff8c00
    }
    &:after {
        position: absolute;
        left: 22px;
        animation: preloader_after 1.5s infinite ease-in-out;
        background: #ff4500
    }
}

@keyframes preloader_before {
    0%,
    100% {
        transform: translateX(0)rotate(0)
    }
    50% {
        transform: translateX(50px)scale(1.2)rotate(260deg);
        border-radius: 0;
        background: #7cfc00
    }
}

@keyframes preloader_after {
    0%,
    100% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-50px)scale(1.2)rotate(-260deg);
        border-radius: 0;
        background: #ff8c00
    }
}
